<template>
  <div class="all">
    <div style="position: sticky;top: 0;z-index: 9999" class="header">
        <span @click="goBack()" class="fanhui">
          <img src="../../../assets/返回.png" alt="lazy" loading="lazy">
          <span class="sides">返回</span>
        </span>
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="请输入搜索关键词"
        left-icon=""
        show-action
      >
        <template #left-icon>
          <div >
            <van-icon name="search" />
          </div>
        </template>
        <template #action></template>
      </van-search>
      <span></span>
    </div >
    <div class="menu">
      <ul>
        <li v-for="(item, index) in modelMenu"
            :key="index"
            @click="clickMenu(item, index)"
            :class="[select == index ? 'select' : '']">
          {{item.name}}
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import TeamChatList from '../../TeamWorkstation/TeamFunction/Chat/TeamChatList'
export default {
  name: 'DoctorAllOrder',
  components: {TeamChatList},
  data () {
    return {
      modelMenu: [
        {
          name: '居家康复',
          type: 3
        },
        {
          name: '居家护理',
          type: 4
        }, {
          name: '居家生活',
          type: 7
        }, {
          name: '居家养老',
          type: 8
        },
        {
          name: '远程会诊',
          type: 5
        },
        {
          name: '图文咨询',
          type: 1
        },
        {
          name: '视频咨询',
          type: 2
        }
      ],
      type: this.$route.query.type,
      select: 0,
      searchValue: '',
      pathFrom: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.pathFrom = from
    })
  },
  watch: {
    searchValue (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.run()
      }
    }
  },
  mounted () {
    this.type = this.modelMenu[this.select].type
    this.run()
  },
  methods: {
    // 点击菜单
    clickMenu (item, index) {
      this.select = index
      this.type = item.type
      this.run()
    },
    run () {
      let query
      if (this.pathFrom.query) {
        query = this.pathFrom.query
      } else {
        query = Object
      }
      query.type = this.type
      query.showNav = 1
      query.searchVal = this.searchValue
      if (this.type == 3 || this.type == 4 || this.type == 7 || this.type == 8) {
        this.$router.replace({path: '/DoctorAllOrder/DocOrderJujia', query: query})
      } else if (this.type == 1 || this.type == 2 || this.type == 5) {
        this.$router.replace({path: '/DoctorAllOrder/DocTuwenHome', query: query})
      }
    },
    goBack () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.header /deep/ .van-search{
  width: 80%;
}
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  font-family: PingFang SC;
  overflow: auto;
}
.popHeader{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
}
.header{
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 9999;
  /*border-bottom: 1px solid #E5E5E5;*/
  overflow: hidden;
}
.fanhui{
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: #1da4f2;
}
.fanhui  img{
  width: 7px;
  height: 13px;
  margin-right: 5px;
}
.sides{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
}

.menu{
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  overflow-x: auto;
  background: white;
  /*margin-bottom: 5px;*/
  position: sticky;
  top: 12vw;
  z-index: 9999;
}
.menu::-webkit-scrollbar{
  display: none;
}
.menu ul{
  width: auto;
  /*width: 98%; !* 可注释*!*/
  height: 29px;
  display: flex;
  align-items: center;
  /*margin-right: 20px;*/
}
.menu ul li:first-child{
  border-radius: 5px 0 0 5px;
}
/*.menu ul li:nth-child(2){ !* 可注释*!*/
/*  border-radius: 0px 5px 5px 0px;*/
/*}*/
.menu ul li:last-child{
  border-radius: 0px 5px 5px 0px;
  margin-right: 20px;
}
.menu ul li{
  min-width: 80px;
  /*width:80px;*/
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1da4f2;
  background: rgba(29, 164, 242, 0.1);
}
.select{
  color: white !important;
  background: #1da4f2 !important;
}

</style>
